<template>
  <div class="rg-time">
    <div></div>
    <div>
      <div class="rg-time-text">{{ currentTime.toLocaleTimeString() }}</div>
      <div class="rg-time-week">
        {{ currentTime.toLocaleDateString() }} 星期{{
          ['日', '一', '二', '三', '四', '五', '六'][currentTime.getDay()]
        }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentTime = ref(new Date())

let timer

onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date()
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style lang="scss" scoped>
.rg-time {
  // display: flex;
  // align-items: center;
  .rg-time-text {
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 25px;
    color: #d8d8d8;
    line-height: 34px;
  }
  .rg-time-week {
    font-family: ABeeZee, ABeeZee;
    font-weight: 400;
    font-size: 14px;
    color: #ed644c;
    line-height: 19px;
  }
}
</style>
